<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.qccode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.qccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvescode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.shelvescode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.shelves.shelvestype')">
            <el-select v-model="formInline.shelvestype">
              <el-option v-for="(item,index) in typeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="sku">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="SupplierCode">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state">
              <el-option v-for="(item,index) in stateOptions" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordernumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.erpordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.erpordercode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search(formInline)" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-table
      ref="table"
      stripe
      empty-text
      fit
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange"
    >
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="shelvescode" :label="$t('m.shelves.shelvescode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-shelvesCode')">
            <el-button type="text" @click="shelvescodeResult(scope.row.shelvesid,scope.row.shelvesdate)">{{scope.row.shelvescode}}</el-button>
          </template>
          <template v-else>{{scope.row.shelvescode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="qccode" :label="$t('m.shelves.qccode')"></el-table-column>
      <el-table-column align="center" prop="ordernumber" :label="$t('m.in.ordernumber')"></el-table-column>
      <el-table-column align="center" prop="erpordercode" :label="$t('m.in.erpordercode')"></el-table-column>
      <el-table-column align="center" :label="$t('m.shelves.shelvestype')">
        <template slot-scope="scope">{{scope.row.shelvestype|typeFilter}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.state')">
        <template slot-scope="scope">{{scope.row.state|stateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" prop="creator" :label="$t('m.shelves.creator')"></el-table-column>
      <el-table-column align="center" prop="shelvesuser" :label="$t('m.shelves.shelvesuser')"></el-table-column>
      <el-table-column align="center" :label="$t('m.createdate')">
        <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('m.shelves.shelvesdate')">
        <template slot-scope="scope">{{scope.row.shelvesdate|dateFilter}}</template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChange" @size-change="handleSizeChange"></el-pagination>
    <!-- table数据展示 end -->

    <!-- 上架单dialog start -->
    <shelvescodePopup v-if="shelvescodePopupVisible" :popupVisible="shelvescodePopupVisible" :detail="popupData" :shelvesdate="shelvesdate" @close="shelvescodePopupVisible=false"></shelvescodePopup>
    <!-- 上架单dialog end -->
  </div>
</template>
<script>
let __this
import shelvescodePopup from '@/components/onShelves/shelvescode-popup'
export default {
  name:'onShelves',
  data(){
    return {
      formInline:{
        // shelvescode:'', // 上架单
        // qccode:'', // 质检单
        // shelvestype:'', // 上架类型
        // productspeccode:'', //sku
        // suppliercode:'', //suppliercode
        // state:'',
        // shelvesid:'' // 上架id
      },

      tableData:[],

      shelvescodePopupVisible:false, // 控制上架单dialog显示隐藏
      popupData:'',
      shelvesdate:'' // 上架时间
    }
  },
  beforeCreate(){
    __this = this
  },
  mounted(){
    this.getData()
  },
  computed:{
    typeOptions(){
      return [
        { value:'', label:this.$t('m.all') },
        { value:1, label:this.$t('m.shelves.type1') },
        { value:2, label:this.$t('m.shelves.type2') },
        { value:3, label:this.$t('m.shelves.type3') }
      ]
    },
    stateOptions(){
      return [
        { value:'', label:this.$t('m.all') },
        { value:2, label:this.$t('m.shelves.state5') },
        { value:3, label:this.$t('m.shelves.state3') }
      ]
    }
  },
  filters:{
    stateFilter(val){
      let { label } = __this.stateOptions.find((item) => {
        return item.value === val
      })
      return label
    },
    typeFilter(val){
      return __this.typeOptions[val].label
    }
  },
  components:{ shelvescodePopup },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:'/shelves/historylist',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
        if (!data.records.length) return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // popup弹出层 上架单信息
    shelvescodeResult(id, shelvesdate){
      if (shelvesdate) this.shelvesdate = shelvesdate
      this.getShelvesData(id)
    },
    // 根据shelvesid查询
    getShelvesData(id){
      this.$axios({
        method:'get',
        url:`shelves/query/${id}`
      }).then(({ data }) => {
        this.popupData = data
        this.shelvescodePopupVisible = true
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.shelvescodePopupVisible = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.container ::v-deep .el-select {
  width: 100%;
}
</style>